<template>
  <div>
    <div ref="box">
      <h1 class="title" ref="xx">模板引用</h1>
      <A ref="acomp"/>
    </div>
    
  </div>
</template>

<script>
import A from "@/components/模板引用/A.vue";


export default{
  name: 'Index',
  components: {
    A
  },
  data(){
    return {
      dom:null
    }
  },
  created(){
    this.$nextTick(()=>{
      console.log(this.$refs.box);
    })
  },
  mounted(){
    // console.log(this.$refs.box);     // this.$refs.box 获取dom元素
    // this.$refs.acomp.changeColor("red");
    this.$refs.acomp.changeColorH2("purple");
    // console.log(this.$refs.acomp)
  },
  methods:{
  
  }
};
</script>

<style scoped lang='scss'>
  .title{
    color:rgb(253, 178, 86);
  }
</style>